<template>
  <div>
    <div id="container1">
      <el-form :inline="true" class="demo-form-inline">
        <div
          style="
            width: 100%;
            text-align: left;
            margin-top: 10px;
            margin-left: 30px;
          "
        >
          <el-form-item label="医院与科室:">
            <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </div>
        <div
          style="
            width: 100%;
            text-align: left;
            margin-top: 0px;
            margin-left: 30px;
          "
        >
          <el-form-item label="维修人员:">
            <el-select v-model="uid" placeholder="选择维修人员">
              <el-option
                v-for="item in fixWorkerList"
                :key="item.uid"
                :value="item.uid"
                :label="item.uname"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="修复结果:">
            <el-radio v-model="softdel" label="0">已修复</el-radio>
            <el-radio v-model="softdel" label="1">无法修复</el-radio>
          </el-form-item>
        </div>
        <div
          style="
            width: 100%;
            text-align: left;
            margin-top: 0px;
            margin-left: 30px;
          "
        >
          <el-form-item label="起始日期:">
            <el-date-picker
              style="width: 98%"
              v-model="beginTime"
              type="date"
              placeholder="选择起始日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="终止日期:">
            <el-date-picker
              style="width: 100%"
              v-model="endTime"
              type="date"
              placeholder="选择截至日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="checkByCondition"
              >查询</el-button
            >
            <el-button type="warning" @click="reloadFixList">返回</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div id="container2">
      <div style="width: 98%; margin: 20px auto; text-align: left">
        <el-button type="primary" @click="exportFixInfo" size="small"
          >导出报表</el-button
        >
        <el-button type="warning" @click="addFix" size="small"
          >新增记录</el-button
        >
      </div>
      <div style="width: 98%; margin: 10px auto; text-align: left">
        <div style="float: left; margin-right: 10px">
          <i class="el-icon-s-custom"></i>
        </div>
        <div>
          <h3>总记录数：{{ this.pageInfo.total }}</h3>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="pageInfo.list"
        tooltip-effect="dark"
        style="width: 100%"
        stripe="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column label="维修编号" prop="fid" align="center">
        </el-table-column>
        <el-table-column
          label="故障类型"
          prop="tbMalfunction.matype"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column prop="madesc" label="故障描述" align="center">
        </el-table-column> -->
        <el-table-column prop="tbWorker.uname" label="维修人员" align="center">
        </el-table-column>
        <el-table-column prop="softdel" label="维修结果" align="center">
          <template slot-scope="scope">
            {{ scope.row.softdel | filterSoftDel }}
          </template>
        </el-table-column>
        <el-table-column prop="fixTime" label="维修时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="fixDetail(scope.row)"
              >详情</el-button
            >
            <el-button type="warning" size="mini" @click="updateFix(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
    <!--添加模态框开始-->
    <el-dialog title="添加维修记录" :visible.sync="addDialogVisible">
      <el-form :model="fixAddForm">
        <el-form-item label="医院/科室">
          <el-cascader
            v-model="addValue"
            :options="options"
            @change="addHandleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="床位编号">
          <el-select v-model="fixAddForm.addBid" placeholder="选择床位">
            <el-option
              v-for="item in bedList"
              :key="item.bid"
              :value="item.bid"
              :label="item.bnum"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修人员">
          <el-select v-model="fixAddForm.addUid" placeholder="选择维修人员">
            <el-option
              v-for="item in fixWorkerList"
              :key="item.uid"
              :value="item.uid"
              :label="item.uname"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障编号">
          <el-select v-model="fixAddForm.addMid" placeholder="选择故障编号">
            <el-option
              v-for="item in faultList"
              :key="item.maid"
              :value="item.maid"
              :label="item.maid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修结果">
          <el-radio v-model="fixAddForm.addSoftdel" label="0">已修复</el-radio>
          <el-radio v-model="fixAddForm.addSoftdel" label="1"
            >无法修复</el-radio
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddSaveClick">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加模态框结束-->
    <!--修改模态框开始-->
    <el-dialog title="修改维修记录" :visible.sync="updDialogVisible">
      <el-form :model="fixUpdForm">
        <el-form-item label="医院/科室">
          <el-cascader
            v-model="updValue"
            :options="options"
            @change="updHandleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="床位编号">
          <el-select v-model="fixUpdForm.updBid" placeholder="选择床位">
            <el-option
              v-for="item in updBedList"
              :key="item.bid"
              :value="item.bid"
              :label="item.bnum"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修人员">
          <el-select v-model="fixUpdForm.updUid" placeholder="选择维修人员">
            <el-option
              v-for="item in fixWorkerList"
              :key="item.uid"
              :value="item.uid"
              :label="item.uname"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障编号">
          <el-select v-model="fixUpdForm.updMid" placeholder="选择故障编号">
            <el-option
              v-for="item in faultList"
              :key="item.maid"
              :value="item.maid"
              :label="item.maid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修结果">
          <el-radio v-model="fixUpdForm.updSoftdel" label="0">已修复</el-radio>
          <el-radio v-model="fixUpdForm.updSoftdel" label="1"
            >无法修复</el-radio
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="updDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdSaveClick">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改模态框结束-->
  </div>
</template>
<style scoped>
#container1 {
  width: 95%;
  height: 200px;
  margin: auto;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
#container2 {
  width: 95%;
  height: 580px;
  margin: auto;
  margin-top: 30px;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
</style>
<script>
import {
  getFixWorkerList,
  getFixList,
  getHospitalList,
  getBedList,
  getFaultList,
  saveNewFix,
  updSelectFix,
  getUpdBedList,
  saveUpdFix,
} from "@/api/fix.js";
export default {
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },
      hospitalList: [],
      value: [],
      options: [],
      fixWorkerList: [],
      hid: "",
      did: "",
      uid: "",
      softdel: "",
      beginTime: "",
      endTime: "",
      addDialogVisible: false,
      formLabelWidth: "100px",

      addValue: [],
      bedList: [],
      faultList: [],
      fixAddForm: {},

      updDialogVisible: false,
      updValue: [],
      updBedList: [],
      fixUpdForm: {},
    };
  },
  filters: {
    filterSoftDel(val) {
      //0已修复；1修复中；2无法修复
      if (val == 0) {
        return "已修复";
      }
      if (val == 1) {
        return "无法修复";
      }
    },
  },
  methods: {
    // loadHospitalList() {
    //   getHospitalList().then((res) => {
    //     if (res.data.code == 200) {
    //       this.hospitalList = res.data.data;
    //     }
    //   });
    // },
    // loadDepartmentList() {
    //   getDepartmentList().then((res) => {
    //     if (res.data.code == 200) {
    //       this.departmentList = res.data.data;
    //     }
    //   });
    // },
    loadFixWorkerList() {
      getFixWorkerList().then((res) => {
        if (res.data.code == 200) {
          this.fixWorkerList = res.data.data;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageNum = 1;
      this.loadFixList();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.loadFixList();
    },
    loadFixList() {
      var data = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        hid: parseInt(this.hid),
        did: parseInt(this.did),
        uid: parseInt(this.uid),
        softdel: parseInt(this.softdel),
        beginTmie: this.beginTime,
        endTime: this.endTime,
      };
      getFixList(data).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
          //   this.hid="";
          //   this.did="";
          //   this.uid ="";
          //   this.softdel = "";
          //   this.beginTime = "";
          //   this.endTime = "";
        }
      });
    },
    checkByCondition() {
      this.loadFixList();
    },
    reloadFixList() {
      this.value = [];
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = 5;
      this.hid = "";
      this.did = "";
      this.uid = "";
      this.softdel = "";
      this.beginTime = "";
      this.endTime = "";
      this.loadFixList();
    },
    addFix() {
      this.addDialogVisible = true;
      this.loadFaultList();
    },
    fixDetail(row) {
      this.$router.push({
        path: "/Home/FixDetail",
        query: { fid: row.fid },
      });
    },
    updateFix(row) {},
    handleChange(value) {
      /**
       * 选择医院和科室后，及时给data中hid、did赋值
       */
      this.hid = this.value[0];
      this.did = this.value[1];
      // alert(value[0]);
      // alert(value[1]);
    },
    /*
    级联数据
     */
    loadHospitalList() {
      getHospitalList().then((res) => {
        if (res.data.code == 200) {
          this.hospitalList = res.data.data;
          for (var i = 0; i < this.hospitalList.length; i++) {
            this.options.push({
              value: this.hospitalList[i].id,
              label: this.hospitalList[i].hname,
              children: [],
            });
            for (
              var j = 0;
              j < this.hospitalList[i].tbDepartments.length;
              j++
            ) {
              this.options[i].children.push({
                value: this.hospitalList[i].tbDepartments[j].did,
                label: this.hospitalList[i].tbDepartments[j].dname,
              });
            }
          }
        }
      });
    },

    /**
     * 以下为添加模态框板块
     */
    addHandleChange(addValue) {
      var data = {
        addHid: this.addValue[0],
        addDid: this.addValue[1],
      };
      getBedList(data).then((res) => {
        if (res.data.code == 200) {
          this.bedList = res.data.data;
        }
      });
    },
    loadFaultList() {
      getFaultList().then((res) => {
        if (res.data.code == 200) {
          this.faultList = res.data.data;
        }
      });
    },
    handleAddSaveClick() {
      var data = {
        addHid: this.addValue[0],
        addUid: this.fixAddForm.addUid,
        addBid: this.fixAddForm.addBid,
        addMid: this.fixAddForm.addMid,
        addSoftdel:parseInt(this.fixAddForm.addSoftdel),
      };
      saveNewFix(data).then((res) => {
        if (res.data.code == 200) {
          this.fixAddForm = {};
          this.addValue = [];
          this.bedList = [];
          alert("添加成功");
          this.loadFixList();
          this.addDialogVisible = false;
        }
        if (res.data.msg == "403") {
          this.$message.error(res.data.data);
        }
      });
    },

    /**
     * 以下为修改模态框板块
     */
    updateFix(row) {
      this.updDialogVisible = true;
      this.loadFaultList();
      updSelectFix(row.fid).then((res) => {
        if (res.data.code == 200) {
          this.updValue.push(res.data.data.tbBed.hid);
          this.updValue.push(res.data.data.tbBed.did);
          this.loadUpdBedList();
          this.fixUpdForm.updBid = res.data.data.bid;
          this.fixUpdForm.updUid = res.data.data.uid;
          this.fixUpdForm.updMid = res.data.data.mid;
          this.fixUpdForm.updSoftdel = res.data.data.softdel;
          this.fixUpdForm.fid = res.data.data.fid;
        }
      });
    },
    loadUpdBedList() {
      var data = {
        addHid: this.updValue[0],
        addDid: this.updValue[1],
      };
      getUpdBedList(data).then((res) => {
        if (res.data.code == 200) {
          this.updBedList = res.data.data;
        }
      });
    },

    updHandleChange(updValue) {
      var data = {
        updHid: this.updValue[0],
        updDid: this.updValue[1],
      };
      getUpdBedList(data).then((res) => {
        if (res.data.code == 200) {
          this.updBedList = res.data.data;
        }
      });
    },
    handleUpdSaveClick() {
      var data = {
        updFid: this.fixUpdForm.fid,
        updHid: this.updValue[0],
        updUid: this.fixUpdForm.updUid,
        updBid: this.fixUpdForm.updBid,
        updMid: this.fixUpdForm.updMid,
        updSoftdel: parseInt(this.fixUpdForm.updSoftdel),
      };
      saveUpdFix(data).then((res) => {
        if (res.data.code == 200) {
          this.fixUpdForm = {};
          this.updValue = [];
          this.updBedList = [];
          alert("修改成功");
          this.updDialogVisible = false;
          this.loadFixList();
        }
        if (res.data.msg == "403") {
          this.$message.error(res.data.data);
        }
      });
    },
  },
  mounted() {
    this.loadHospitalList();
    this.loadFixWorkerList();
    this.loadFixList();
  },
};
</script>